<template>
  <!-- 代理合作 -->
  <div class="agency_cooperation">
    <div class="head">
      <nut-navbar class="navbar" z-index="5" fixed safe-area-inset-top>
        <template #content>
          <span>{{ t("proxy_page_agent") }}</span>
        </template>
        <template #left>
          <iconpark-icon @click="router.go(-1)" class="close" icon-id="you" size="1.2rem"></iconpark-icon>
        </template>
        <template #right>
        </template>
      </nut-navbar>
    </div>
    <div class="content">
      <!-- <scroll-view class="main_content"> -->
      <div class="base_data">
        <div class="top_title">
          <div>
            <span>{{ t("identity") }}&nbsp;</span>
            <span class="identity_level">{{ t(IdentityMap[proxyInfo.level] || t('wanjia')) }}</span>
          </div>
          <div>
            <span>{{ t("Casino draws") }}：</span>
            <span class="vnd">{{ !proxyInfo.level ? '0%(VND)' : proxyInfo.ratio ? `${proxyInfo.ratio * 100}%(VND)` :
              '0%(VND)'
              }}
            </span>
          </div>
        </div>
        <div class="main_top">
          <div class="commission_section">
            <div class="commission">
              <span>{{ !proxyInfo.level ? '--' : ((proxyInfo.personal_money + proxyInfo.team_money) || 0) }}</span>
              <span>{{ t("total_commission") }}</span>
            </div>
            <div class="commission">
              <span>{{ !proxyInfo.level ? '--' : (proxyInfo.team_money || 0) }}</span>
              <span>{{ t("Team_commission") }}</span>
            </div>
            <div class="commission">
              <span>{{ !proxyInfo.level ? '--' : (proxyInfo.personal_money || 0) }}</span>
              <span>{{ t("Direct player commission") }}</span>
            </div>
          </div>
          <div class="top_btns" v-if="proxyInfo && proxyInfo.level !== null && proxyInfo.level !== undefined">
            <Btn height="44px" fontSize="14px" v-shrink-on-click @click="toProxyRecord" class="submit gray">{{
              t("mine_myaudit") }}</Btn>
            <Btn height="44px" fontSize="14px" @click="claim" class="orange">{{ t("WithDraw_Commission") }}</Btn>
          </div>
          <iconpark-icon icon-id="signicon08" size="1.8rem" class="refresh" :class="isRefreshing && 'refreshing'"
            @click="refresh"></iconpark-icon>
        </div>
      </div>
      <div class="option_title">
        <div>{{ t('proxy_page_url') }}</div>
        <div class="introduce_link" @click="router.push('/agentIntroduction')">{{ t("home_page_agentIntroduction") }}</div>
      </div>
      <div class="link">
        <div class="text">
          <span>{{ proxyInfo.s_link || '--' }}</span>
        </div>
        <div class="link-right">
          <Btn height="30px" width="60px" fontSize="12px" @click="click_copy">{{ t("Copy") }}</Btn>
        </div>
      </div>
      <!-- 报表 -->
      <agentTable :proxyInfo="proxyInfo"></agentTable>
      <!-- </scroll-view> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import Btn from '../../components/Btn.vue'
import agentTable from './components/agentTable.vue'
import { useRouter } from "vue-router";
import { MessageEvent2 } from "@/net/MessageEvent2.ts";
import { NetMsgType } from "@/netBase/NetMsgType.ts";
import { reactive, ref, onMounted, onUnmounted } from "vue";
// import { IdentityMap } from "../../enums/proxyEnum.ts";
import { copyFn } from "@/utils/publicMethods.ts";
import { showToast } from "@nutui/nutui";
import { NetPacket } from "@/netBase/NetPacket.ts";
import H5Websocket from "@/net/Net1.ts";
import { useI18n } from "vue-i18n";
// import { useI18n } from "vue-i18n";

const { t } = useI18n();
const router = useRouter();

let proxyInfo: any = reactive({
  level: undefined,
  ratio: '',
  personal_money: 0,
  team_money: 0,
  s_link: ''
});
const resultHandle = (rs: any) => {
  Object.assign(proxyInfo, rs)
}
/**
 * @description: 赌场身份
 */
const IdentityMap: any = {
  '1': 'identity_map_1',
  '2': 'identity_map_2',
  '3': 'identity_map_3',
  '4': 'identity_map_4',
  '5': 'identity_map_5',
}

// 非下级代理时 提示：您还不是代理，请联系上级
const agentTip = () => {
  if (proxyInfo.level == 0) {
    showToast.fail(t('proxy_page_notAgent'))
    return false
  }
  return true
}
const toProxyRecord = () => {
  if (!agentTip()) return
  router.push('/proxy_record')
}
// 点击复制
const click_copy = () => {
  if (!agentTip()) return
  if (proxyInfo?.s_link) {
    copyFn(proxyInfo.s_link)
    showToast.text(t("copy_success"))
  }
}

// 刷新代理链接
const isRefreshing = ref(false)
const refresh = () => {
  isRefreshing.value = true
  queryData()
  setTimeout(() => {
    isRefreshing.value = false
  }, 1000)
}

const queryData = () => { // 查询
  const query = NetPacket.req_daily_return_info()
  H5Websocket.sendMessageHandler(query);
}
queryData()
// 提款
const claim = () => {
  if (!agentTip()) return
  const query = NetPacket.req_daily_return_claim()
  H5Websocket.sendMessageHandler(query);
}
const claimHandle = (rs: any) => {
  if (rs.result === 0) {
    showToast.success(t('promo_page_applySuc'))
    queryData()
  } else {
    // showToast.fail(t('Insufficient Commission'))
    showToast.fail(t('Insufficient Commission'))
  }
}

MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_daily_return_claim,
  claimHandle,
);
onMounted(async () => {
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_daily_return_info,
    resultHandle,
  );
});
onUnmounted(() => {
  MessageEvent2.removeMsgEvent(
    NetMsgType.msgType.msg_notify_daily_return_info,
    null,
  );
})
</script>

<style lang="scss" scoped>
.agency_cooperation {
  padding-top: 46px;
}

.content {
  padding: 0 10px 10px;
  // .main_content {
  //   height: 90vh;
  // }
}

.head {
  background: #0B0C28;
  width: 100%;
  position: fixed;
  height: 55px;
  z-index: 5;
  top: 0;
}

.main_top {
  position: relative;
  border-radius: 0px 0px 8px 8px;
  padding: 15px 10px;

  .commission_section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .commission {
    width: 48%;
    margin-bottom: 10px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #2E296B;
    border-radius: 6px;

    span {
      &:nth-child(1) {
        color: #ffffff;
        font-size: 16px;
        font-weight: bold;
      }

      &:nth-child(2) {
        color: #8D84C5;
        font-size: 10px;
        margin-left: 5px;
        margin-top: 2px;
      }
    }
  }

  .top_btns {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    justify-content: space-between;

    .btn-content {
      width: 48%;
    }
  }

  .refresh {
    position: absolute;
    right: 10px;
    top: 10px
  }
}

.base_data {
  background: #131232;
  border-radius: 12px;
  box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
}

.top_title {
  color: #C6C4F5;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  height: 36px;
  width: 100%;
  padding: 0 10px;

  .identity_level {
    color: #FFA423;
  }

  .vnd {
    color: #fff;
  }


}

.option_title {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: #fff;

  .introduce_link {
    color: #5B6CFF;
    text-decoration: underline;
  }
}

.link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1D1C3C;
  box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
  padding: 10px;
  border-radius: 6px;

  .text {
    flex: 1;
    font-size: 14px;
    color: #fff;
    // word-wrap: break-word;
    display: flex;
    word-break: break-all;

  }

  .link-right {
    margin-left: 10px;
    flex-shrink: 0;
    display: flex;
    gap: 10px;
  }

}

.refreshing {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

:deep(.nut-navbar__title) {
  background-color: #FFE81A;
  color: black;
  padding: 2px 4px;
  border-radius: 4px;
}

.close {
  rotate: 180deg
}
</style>
